<template>
  <view class="container revenue-summary-container">
    <!-- header -->
    <view class="summary-header">
      <view class="summary-header-content">
        <!-- tabs -->
        <ve-subsection
          activeColor="#3072F6"
          bgColor="#F7F8FA"
          height="72"
          inactiveColor="#55585F"
          :list="subsectionList"
          @change="onTabChange"
        />
        <!-- 筛选 -->
        <summaryNavFilter ref="summaryNavFilterRef" @change="filterChange" class="filter" />
      </view>
    </view>
    <!-- 更新时间 -->
    <view class="update-time">
      <view>数据更新时间：{{ updateTime }}</view>
      <view>详细数据请在电脑端查看</view>
    </view>
    <!-- 内容 -->
    <view class="summary-content">
      <!-- 营收数据汇总 -->
      <total ref="moduleRef" v-if="activeIndex == 0" :refreshUpdateTime="refreshUpdateTime" />
      <!-- 总资产 -->
      <asset ref="moduleRef" v-if="activeIndex == 1" :refreshUpdateTime="refreshUpdateTime" />
      <!-- 总收入 -->
      <income ref="moduleRef" v-if="activeIndex == 2" :refreshUpdateTime="refreshUpdateTime" />
      <!-- 总支出 -->
      <expend ref="moduleRef" v-if="activeIndex == 3" :refreshUpdateTime="refreshUpdateTime" />
    </view>
  </view>
</template>
<script lang="ts" setup>
  import { ref, provide, nextTick } from 'vue'
  import summaryNavFilter from './components/summary-nav-filter.vue'
  import dayjs from 'dayjs'
  import { onPullDownRefresh } from '@dcloudio/uni-app'
  // modules
  import total from './modules/total.vue'
  import asset from './modules/asset.vue'
  import income from './modules/income.vue'
  import expend from './modules/expend.vue'

  // ref
  const moduleRef = ref(null)

  const subsectionList = [
    {
      name: '营收汇总',
      alias: 'total',
    },
    {
      name: '总资产',
      alias: 'asset',
    },
    {
      name: '总收入',
      alias: 'income',
    },
    {
      name: '总支出',
      alias: 'expend',
    },
  ]
  // 数据更新时间
  const updateTime = ref('获取中~')

  // tabs切换
  const activeIndex = ref(0)
  const summaryNavFilterRef = ref<any>(null)
  const onTabChange = (index: number) => {
    activeIndex.value = index
    // 传递
    summaryNavFilterRef.value && summaryNavFilterRef.value.tabsChangeFn(subsectionList[index].alias)
  }

  // 条件筛选
  const queryParam = ref({})
  provide('queryParam', queryParam)
  // 筛选
  const filterChange = (val: any) => {
    queryParam.value = val
    nextTick(() => {
      updateModule()
    })
  }

  // 更新数据更新时间
  const refreshUpdateTime = (time: string) => {
    updateTime.value = time
    uni.stopPullDownRefresh()
  }

  onPullDownRefresh(() => {
    updateModule()
  })

  // 触发模块更新
  const updateModule = () => {
    uni.showLoading({
      title: '加载中...',
      mask: true,
    })
    const param = {
      orderTimeQueryType: queryParam.value.orderTimeQueryType,
      startTime: dayjs(queryParam.value.startTime).format('YYYY-MM-DD 00:00:00'),
      endTime: dayjs(queryParam.value.endTime).format('YYYY-MM-DD 23:59:59'),
      selectDateType: queryParam.value.selectDateType,
    }
    // 总支出：门店下拉读取的是机构列表
    if (activeIndex.value == 3) {
      if (queryParam.value.orgIdList && queryParam.value.orgIdList.length > 0) {
        param.orgIdList = queryParam.value.orgIdList
      }
    } else {
      if (queryParam.value.siteIdList && queryParam.value.siteIdList.length > 0) {
        param.siteIdList = queryParam.value.siteIdList
      }
    }
    if (moduleRef.value && moduleRef.value.loadData) moduleRef.value.loadData(param)
  }
</script>
<style lang="less" scoped>
  .summary-header {
    width: 100%;
    position: sticky;
    top: 0;
    // #ifdef H5
    top: 44px;
    // #endif
    z-index: 100;
    border-top: 1px solid #f7f8fa;
    .summary-header-content {
      padding: 20rpx 24rpx;
      background: #ffffff;
      box-shadow: 0 2rpx 20rpx rgba(0, 0, 0, 0.05);

      .filter {
        margin-top: 20rpx;
        height: 48rpx;
      }
    }
  }
  .update-time {
    height: 80rpx;
    font-size: 24rpx;
    color: #919aa5;
    line-height: 34rpx;
    margin: 20rpx 0;
    text-align: center;
    view + view {
      margin-top: 12rpx;
    }
  }
  .summary-content {
    width: 100%;
  }
</style>
